import { type } from 'os';
<!--
 * @Author: your name
 * @Date: 2021-05-13 09:59:44
 * @LastEditTime: 2021-05-13 17:33:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\versionService\drawer.vue
-->
<template>
    <div>
        <el-drawer
        :title="$t('version.service.Special.filter')"
        :visible.sync="drawer"
        :with-header="false"
        size='300px'
        :wrapperClosable='false'
        :append-to-body='true'
        >
        <div class="drawer-main-box-base" v-loading="loading">
            <h3 class='text-center'>{{$t('version.service.Special.filter')}}</h3>
            <hr>
            <div class="fixed-box">
                <el-button type="primary" @click='selectAll'>{{$t('test.deviceTest.historyTest.Select')}}</el-button>
                <el-button type="primary" @click='closeAll'>{{$t('test.deviceTest.empty')}}</el-button>
                <el-button type="primary" @click='save()'>{{$t('save')}}</el-button>
                <el-button type="primary" @click='closeDrawer'>{{$t('close')}}</el-button>
            </div>
            <el-input
            :placeholder="$t('common.ple-insert-keyword')"
                v-model="filterText" style='margin-top:10px;'>
            </el-input>
            <div class="scroll-box" :style="scrollHeighr">
                <el-tree
                :data="accountList"
                show-checkbox
                node-key="ids"
                :props="defaultProps"
                :default-expand-all='true'
                ref='newTopRightsTree'
                :default-checked-keys="returnCheckList"
                :filter-node-method="filterNode"
                >
                </el-tree>
            </div>
        </div>
        </el-drawer>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        drawer:{
            type:Boolean,
            default:false
        },
        id:{
            type:String,
            default:""
        }
    },
    data() {
        return {
            loading:false,
            defaultProps: {
                children: 'children',
                label: 'loginName'
            },
            scrollHeighr:`max-height: ${document.body.clientHeight-160}px;`,
            returnCheckList:[],
            accountList:[],
            filterText:'',
            oldUserList:[]
        };
    },
    computed: {

    },
    watch: {
        filterText(val) {
            this.$refs.newTopRightsTree.filter(val);
        },
        id:{
            handler(nv,ov){
                if(nv){
                    this.specialupdateGetChoseUserList()
                }
            },
            deep:true,
            immediate:true
        }
    },
    created() {

    },
    mounted() {
        window.onresize = () =>{
            this.scrollHeighr=`max-height: ${document.body.clientHeight-160}px;`
        }
        this.$nextTick(() => {
           this.$refs.newTopRightsTree.setCheckedKeys([])
        })
    },
    methods: {
        async specialupdateSaveBatch(){
            let menuIds = [...this.$refs.newTopRightsTree.getCheckedNodes(),...this.$refs.newTopRightsTree.getHalfCheckedNodes()]
            let ids = menuIds.map(item=>{
                return item.ids
            })
            let res = await this.API.specialupdateSaveBatch({
                userIds:ids,
                versionId:this.id,
                specialType:'1'
            })
            if(this.comm.showMsg(res.success)){

                this.$emit('update:drawer',false)
                this.$emit('upload',true)
            }
        },
        async specialupdateGetChoseUserList(){
            this.loading = true
            let res = await this.API.specialupdateGetChoseUserList({
                updateVersionId:this.id,
                specialType:'1'
            })
            this.oldUserList = res
            this.returnCheck(this.oldUserList)
            this.specialupdateGetAllSpecialUser()
        },
        async specialupdateGetAllSpecialUser(){
            let res = await this.API.specialupdateGetAllSpecialUser()
            this.loading = false
            this.accountList = res
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.loginName.indexOf(value) !== -1;
        },
        closeDrawer(){
            this.$emit('update:drawer',false)
        },
        save(){
            this.specialupdateSaveBatch()
        },
        selectAll(){
            this.returnCheckList = this.accountList.map(item=>{
                return item.ids
            })
        },
        closeAll(){
            this.$refs.newTopRightsTree.setCheckedKeys([])
        },
        returnCheck(arr){
            this.returnCheckList = []
            arr.forEach(item =>{
                this.returnCheckList.push(item.userIds)
            })
            return this.returnCheckList
        }
    },
};
</script>

<style  lang="less" scoped>
.drawer-main-box-base{
    padding: 10px;
    .el-tree-node__label {
        color: #000 !important;
    }
    .scroll-box{
        overflow-y:scroll;
        
        max-height: 500px;
        margin-top:10px;
    }
    .text-center{
        color: #a1a1a1;
    }
    .fixed-box{
        // position: fixed;
        // top: 65px;
        // right: 15%;
    }
}
</style>
